<template>
  <el-dialog :title="title" :visible.sync="visible" @close="$emit('close-dialog')">
    <el-form
      :model="dialogForm"
      :rules="rules"
      :inline="false"
      label-position="right"
      label-width="120px"
      ref="dialogForm">
      <el-form-item label="用户编号" v-show="false" prop="id">
        <el-input v-model="dialogForm.id"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="dialogForm.name"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="dialogForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="座机" prop="telephone">
        <el-input v-model="dialogForm.telephone"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="dialogForm.address"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="dialogForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="dialogForm.password"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="dialogForm.remark"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('close-dialog')">取 消</el-button>
      <el-button type="primary"  @click="operator">确 定</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {postRequest} from "../../../util/api";

  export default {
    props: {
      dialogVisible: {
        type: [Boolean, Number],
        default : () => false
      },
      type: {
        type: String,
        default : () => "addHr"
      },
      form: {
        type: Object,
        default() {
          return {
            id: 0,
            name: "",
            phone: "",
            telephone: "",
            address: "",
            username: "",
            password: "",
            userface: "",
            remark: ""
          }
        }
      }
    },
    name: "OperationHrDialog",
    data() {
      return {
        dialogForm: {
          id: 0,
          name: "",
          phone: "",
          telephone: "",
          address: "",
          username: "",
          password: "",
          userface: "",
          remark: ""
        },
        visible: false,
        rules: {
          name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
          username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
          password: [{required: true, message: '请输入密码', trigger: 'blur'}]
        }
      }
    },
    computed: {
      title() {
        return this.type === 'addHr' ? '添加用户' : '修改用户';
      }
    },
    methods: {
      operator() {
        if (this.type === "addHr") {
          this.addHr();
        } else if (this.type === "modifyHr") {
          this.modifyHr();
        }
      },
      addHr() {
        this.$refs.dialogForm.validate((valid) => {
          if (valid) {
            postRequest("/system/hr/addHr", this.dialogForm).then(resp=> {
              if (resp.status === 200) {
                this.$emit('close-dialog');
                this.$emit('query');
              }
            })
          } else {
            return false;
          }
        })
      },
      modifyHr() {
        this.$refs.dialogForm.validate((valid) => {
          if (valid) {
            postRequest("/system/hr/modifyHr", this.dialogForm).then(resp=>{
              if (resp.status === 200) {
                this.$emit('close-dialog');
                this.$emit('query');
              }
            })
          } else {
            return false;
          }
        })
      },
      resetForm() {
        if (this.type === 'addHr') {
          this.dialogForm = {
            id: 0,
            name: "",
            phone: "",
            telephone: "",
            address: "",
            username: "",
            password: "",
            userface: "",
            remark: ""
          }
        } else {
          this.dialogForm = JSON.parse(JSON.stringify(this.form));
        }
      },
      reset() {
        if (this.$refs.dialogForm !== undefined) {
          this.$refs.dialogForm.resetFields();
        }
        this.resetForm();
      }
    },
    watch: {
      dialogVisible(newValue, oldValue) {
        this.reset();
        this.visible = newValue;
      },
      type(newValue, oldValue) {
        if (newValue === 'modifyHr') {
          this.dialogForm = JSON.parse(JSON.stringify(this.form));
        }
      },
      form(newValue, oldValue) {
        if (this.type === 'addHr' || newValue === null) {
          return;
        }
        this.dialogForm = JSON.parse(JSON.stringify(newValue));
      }
    }
  }
</script>

<style scoped>

</style>
